<template>
  <view>
    <my-layout :tabbar-is-show="false" :is-absolute-body="false">
      <template #TopBackground>
        <my-top-background />
      </template>
      <template #Navbar>
        <view
          style="width: 100%; height: 100%; display: flex; align-items: center"
        >
          <image
            @click="goback()"
            :src="indexTabBarUrl.navigateBack"
            style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
          />
        </view>
      </template>
      <template #Body>
        <view class="fans_cons">
          <image
            class="fans_title"
            src="http://llg.qiniu.comeinvip.com/images/fanstit.png"
          ></image>
          <view class="fansewm">
            <image
              class="fansewm01"
              src="http://llg.qiniu.comeinvip.com/images/ewm.png"
            ></image>
            <image
              class="fansewm02"
              src="http://llg.qiniu.comeinvip.com/images/ewm01.png"
            ></image>
          </view>
          <view class="wxchat_text">
            <image src="http://llg.qiniu.comeinvip.com/images/wx_ico.png"
              ><text>微信扫一扫，立即加入粉丝群</text></image
            >
          </view>
        </view>
      </template>
    </my-layout>
  </view>
</template>

<script>
import util from "@/utils/util.js";
// import indexBackgroundImage from "@/static/images/top_bj.png"
import indexTabBarUrl from "@/url/index_tabBar";
export default {
  data() {
    return {
      indexTabBarUrl,
      // indexBackgroundImage: indexBackgroundImage,
      isIphoneX: false,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 2, //是否显示左上角返回图标   1表示显示    0表示不显示
        positionShow: 0, //0不显示定位 1 显示定位
        backgroundCor: 3, //0 无背影色 1首页背景颜色   2白色 3有背景无定位
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
      },
      ticketpop: false,
      prices: 360,
      currentPrice: 1,
      windowHeight: 500,
    };
  },
  onLoad() {
    // 获取手机系统信息 info.screenHeight
    const info = uni.getSystemInfoSync();
    this.windowHeight = info.screenHeight;
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.navbarData.navHeight =
      menuButtonInfo.bottom -
      info.statusBarHeight +
      (menuButtonInfo.top - info.statusBarHeight);

    uni.showShareMenu({
      // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"], //开启转发好友和转发朋友圈按钮
    });
  },
  methods: {
    //返回上一页
    goback() {
      uni.navigateBack();
    },
    //分享到朋友圈
    onShareTimeline(res) {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 1,
        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
        success: function (res) {},
        fail: function (err) {},
      });
    },
  },
  onShareAppMessage(res) {
    return {
      title: this.title,
      path: this.path,
      imageUrl: this.dispose.shareImg,
    };
  },
  // 自定义页面的分享到朋友圈
  onShareTimeline() {
    return {
      title: "乐湃鲨自助台球",
      // query: 'userId=123',
    };
  },
};
</script>

<style>
@import url("@/static/css/contents.css");
@import url("@/static/css/others.css");
.ranking_all .nobgr {
  background: transparent;
  overflow: hidden;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 80rpx;
}
.share_content {
  display: flex;
  flex-direction: column;
  margin: 30rpx;
}

.share_title {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  border-bottom: 2rpx solid #f1f1f1;
}

.share_title text {
  color: #333;
  font-size: 24rpx;
  padding: 0rpx 10rpx;
}

.share_con {
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  margin: 20rpx 30rpx;
}

.share_con .wxchat_circle {
  display: flex;
  /* flex-direction: column; */
  /* margin: 20rpx 30rpx; */
  align-items: center;
  border: 0;
  background-color: transparent;
}

button::after {
  border: none;
}

.wxchat_circle image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.wxchat_circle text {
  font-size: 26rpx;
  color: #333;
}

.fgborder {
  display: flex;
  border: none;
  background: transparent;
}

.function_text {
  border: none;
  font-size: 26rpx;
  color: #333;
  background: transparent;
}
</style>
